<template>
	<div class="data-box">
		<div class="data-main">
			<div class="chart" ref="chart"></div>
		</div>
	</div>
</template>

<script>
import * as echarts from 'echarts';
export default {
	async created(){
		const res=await this.$htp.dataRes();
		console.log(res);
		let legend=res.data.data.legend.data;
		let series=res.data.data.series;
		let xAxis=res.data.data.xAxis[0].data;

		let chartbox=this.$refs.chart
		let chart=echarts.init(chartbox)
		let option={
			 title: {
				text: 'Stacked Area Chart'
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
				}
			},
			legend: {
				data: legend
			},
			toolbox: {
				feature: {
				saveAsImage: {}
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: [
				{
				type: 'category',
				boundaryGap: false,
				data: xAxis
				}
			],
			yAxis: [
				{
				type: 'value'
				}
			],
			series:series

		}
		chart.setOption(option)

	}
}
</script>

<style>
	.data-box{width:100%; }
	.data-main{width:80%; height:70vh; padding:30px; margin:50px auto; box-shadow:0 0 5px 1px black;}
	.chart{width:800px; height:500px;}
</style>
